@charset "UTF-8";
@import "../common/scss/variable";
@import "../common/scss/sprites";
@import "../common/scss/mixins";
.m-datepicker{
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(11,14,23,.7);
    left: 0;
    top: 0;
    z-index: 10;
	transition:  all 1s;
  }
  .datepicker{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 900;
    background-color: $bg00;
    width: 100%;
    @each $prefix in '-webkit-','' {
      #{$prefix}transition: all 0.3s ease-in-out;
    }

    .m-header{
      font-size: 1.7rem;
      height: 4.3rem;
      line-height: 4.3rem;
      text-align: left;

      .close-wrap{
        padding: 0 1.4rem 0 2.8rem;
      }
      .m-h-title{
        @extend .flex-row;
        margin: 0;
        position:relative;
        border-bottom: 1px solid $border02;
      }
      .title{
        @extend .flex-item;
        text-align: left;
        padding-left: 1.4rem;
        font-size: 1.5rem;
      }
    }
   }
  .tbody{
    position:relative;
    overflow: hidden;
    border-right: 1.5px solid $border02;
    .tr-row{
      &>div{
        &:nth-child(odd){
          z-index: 14;
        }
        &:nth-child(even){
          z-index: 13;
        }
        border-top: 1.5px solid $border02;
        border-left: 1.5px solid $border02;
      }
    }
  }
.tr-row{
  @extend .flex-row;
  height:4.2rem;
  line-height: 4.2rem;
  text-align: center;
  font-size:1.5rem;
  &>div{
    @extend .flex-item;
    position: relative;
    z-index:12;
    height:4.25rem;
    span,em{position: absolute;left: 0;display: block;width: 100%;text-align: center;}
    span{
		display: inline-block;
		width:100%;
		top:1.2rem;
		line-height: 1.2rem;    
		color:$color01;
	}
	&.allowed{
	   span{
		color:$color02;
	   }
		&.weekend{
		  span{
			color: #6ac67a;
		  }
		}
	}
    .icon-date-slected{visibility: hidden;position: absolute;right: -0.1rem;top:-0.15rem;}
    &.active .icon-date-slected{visibility: visible;z-index: 1000;}
    [data-device-type="android"] &.active .icon-date-slected{
      top:-0.2rem;
    }
    em{
      font-size:0.85rem;
      color:$color05;
      font-style: normal;
      line-height: 1rem;
      top:2.7rem;
    }

    &.prev,&.next{
      -webkit-box-flex: 2;
      -webkit-flex: 2;
      flex: 2;
    }
    &.prev{
      text-align: left;
      padding-left: 1.4rem;
	  &.disabled{
	      opacity: .5;
	  }
    }
    &.next{
      text-align: right;
      padding-right: 1.4rem;
    }
  }
  &.week-row{
    background-color: #f5f5f5;
    font-size:1.2rem;
    color:$color02;
  }
  & .old,& .new{
    color:$border02;
  }
  & .datepicker-switch{
    -webkit-box-flex:3;
    -webkit-flex: 3;
    flex: 3;
    text-align: center;
    font-size: 1.5rem;
  }
}
}
.icon-switch-l{
  @include mix-switch-l();
}
.icon-switch-r{
  @include mix-switch-r();
}
.active{
 .icon-date-slected{
   @include mix-date-slected();
 } 
}
.icon-close{
   @include mix-close();
}
.bg-backhome{
	height:100%;background-color:#f0f0f0;
}
.backhome{
	.offshelf{
		padding:6rem 0 4rem;
		.icon-offshelf{
			width:24.4rem;
			height:9rem;
			background:url(/images/offshelf.png) no-repeat center center;
			background-size:100%;
			margin:0 auto;
		}
	}
	.message{
		text-align:center;
		font-size:$fs15;
		color:$color02;
		padding: 1.4rem;
	}
    .btnbox{
		text-align:center;
		padding-top:5rem;
	   button{
	       @include btn-public();
		   background-color:#7acd89;
		   border:1px solid transparent;
		   padding:0.4rem 2rem;
		   color:#fff;
		   font-size:$fs15;
		   @include radius();
	   }
	}
}